<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="预览" name="first">
      <slot name="preview"></slot>
    </el-tab-pane>
    <el-tab-pane label="代码" name="second">
      <div class="flex justify-end mb-5">
        <el-button type="primary" @click="copyText">复制代码</el-button>
      </div>

      <highlightjs :code="props.code" lang="JavaScript"></highlightjs>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import useClipboard from "vue-clipboard3";
import {ElMessage} from "element-plus";

const props = defineProps(
    {
      code: {
        type: String,
        default: ""
      }
    }
)

const activeName = ref('first')

//复制功能实现
const {toClipboard} = useClipboard();

async function copyText() {
  try {
    console.log(props.code)
    await toClipboard(props.code);
    ElMessage.success("复制成功");
  } catch (e) {
    ElMessage.error(e);
  }
}
</script>